<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Vue3 | Layout</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body>
<div class="wrapper" id="app">

  <!-- 顶部页头 -->
  <lte-main-header>
	  <!-- 这里要写完整的标签，如果写简写的标签，只能渲染出一个组件，原因未知（可能是把第二个当成了结束标签了吧）-->
	  <lte-main-header-navbar-left></lte-main-header-navbar-left>
	  <!-- @sidebar-collapse 监听由控制面板按钮发出来的事件，对Sidebar进行显示或隐藏 -->
	  <lte-main-header-navbar-right @sidebar-collapse="collapseSidebar"></lte-main-header-navbar-right>
  </lte-main-header>

  <!-- 左侧菜单 -->
  <lte-main-sidebar></lte-main-sidebar>

  <!-- 工作区 -->
  <lte-main-content></lte-main-content>
  
  <!-- 系统设置区 -->
  <lte-control-sidebar :style="{display:controlSidebarDisplay}"></lte-control-sidebar>

  <!-- 底部页脚 -->
  <lte-main-footer>
	  <lte-copy-right></lte-copy-right>
	  <lte-version></lte-version>
  </lte-main-footer>
  
  <!-- TODO: 需要考虑这个层的作用 -->
  <div id="sidebar-overlay"></div>
</div>
<!-- ./wrapper -->

<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script src="js/FullScreen.js"></script>
<script src="js/PushMenu.js"></script>
<script src="js/CopyRight.js"></script>
<script src="js/Version.js"></script>
<script src="js/ControlSidebar.js"></script>
<script src="js/MainSidebar.js"></script>


<script type="text/javascript">
	if (!window.emitter) {
		window.emitter = mitt();
	}
	const app = Vue.createApp({
		// 必须是函数形式
		data() {
			return {
				message: "Hello Vue!",
				// Sidebar的隐藏/显示动画效果是建立在display样式属性上的，
				// 因此必须事前设置该样式
				controlSidebarDisplay: 'none'
			}
		},
		beforeCreate() {
			// 阻止动画效果
			document.body.classList.add("hold-transition");
			// 最小化sidebar
			document.body.classList.add("sidebar-mini");
		},
		created() {
			// 完全模仿adminlte的作法，没搞明白这个样式为什么要先加上，而后再去掉
			document.body.classList.remove("hold-transition");
		},
		methods: {
			collapseSidebar() {
				if (!document.body.classList.contains("control-sidebar-slide-open")) {
					// 隐藏横向滚动条
					document.documentElement.classList.add("control-sidebar-animate");
					this.controlSidebarDisplay = 'block';
					setTimeout(function() {
						document.body.classList.add("control-sidebar-slide-open");
						setTimeout(function() {
							document.documentElement.classList.remove("control-sidebar-animate");
						},350)
					},10)
				} else {
					// 隐藏横向滚动条
					document.documentElement.classList.add("control-sidebar-animate");
					document.body.classList.remove("control-sidebar-slide-open");
					var that = this;
					setTimeout(function() {
						that.controlSidebarDisplay = 'none';
						document.documentElement.classList.remove("control-sidebar-animate");
					},350)
				}
			}
		}
	});
	
	app.component('lte-push-menu', PushMenu);
	app.component('lte-full-screen', FullScreent);
	app.component('lte-copy-right', CopyRight);
	app.component('lte-version', Version);
	app.component('lte-control-sidebar', ControlSidebar);
	app.component('lte-main-sidebar', MainSidebar);
	
	app.component('lte-control-sidebar-button', {
		template: `<a class="nav-link" @click.prevent="$emit('toggleDisplay')" data-widget="control-sidebar" data-slide="true" href="#" role="button">
			  <i class="fas fa-th-large"></i>
			</a>`
	});
	
	app.component('lte-main-header', {
		template: `<nav class="main-header navbar navbar-expand navbar-white navbar-light" style="min-height:3.5rem;">
			<slot></slot>
		</nav>`
	});
	
	app.component('lte-main-header-navbar-left', {
		template: `<ul class="navbar-nav">
			  <!--d-none d-sm-inline-block 此组样式表示在窄屏（手机竖版）下隐藏-->
			  <li class="nav-item">
				<lte-push-menu/>
			  </li>
			</ul>`
	});
	
	app.component('lte-main-header-navbar-right', {
		methods: {
			onSidebarToggle() {
				// TODO 如何更好的传递到父组组件进行事件处理
				this.$emit('sidebarCollapse')
			}
		},
		template: `<ul class="navbar-nav ml-auto">
			  <li class="nav-item">
			    <lte-full-screen/>
			  </li>
			  <li class="nav-item">
			    <lte-control-sidebar-button @toggle-display="onSidebarToggle"/>
			  </li>
			</ul>`
	});	
	
	app.component('lte-main-content', {
		template: `<div class="content-wrapper">
			<slot></slot>
		</div>`,
	});
	
	app.component('lte-main-footer', {
		template: `<footer class="main-footer" style="min-height:3.5rem;">
			<slot></slot>
		</footer>`,
	});
	
	// 挂载之前定义好组件，否则组件不生效
	const vm = app.mount('#app');
	console.log("it works!")
</script>
</body>
</html>
